

import React from "react"
import './index.scss'
import { IFormatItem, IStyleItem, TProduceItem, TQualityItem } from "@/types";
interface ISettingProps {
    height?: string;
    show: boolean;
    onShowSetting: (show: boolean) => void;
    styleList: IStyleItem[];
    activeStyle: IStyleItem;
    selectStyle: (style: IStyleItem) => void;
    formatList: IFormatItem[];
    activeFormat: IFormatItem;
    selectFormat: (format: IFormatItem) => void;
    qualityList: TQualityItem[];
    activeQuality: TQualityItem;
    selectQuality: (quality: TQualityItem) => void;
    produceNumber: TProduceItem[];
    activeProducer: TProduceItem;
    selectProduce: (produce: TProduceItem) => void;
}
export function Setting(props: ISettingProps) {
    const {show, onShowSetting,styleList, activeStyle, selectStyle, formatList, activeFormat, qualityList, activeQuality, selectFormat, selectQuality, activeProducer, produceNumber, selectProduce,height } = props
    return (
        <div className={ `ideaPopup ${show?'active':''}`} onClick={e=>e.stopPropagation()}>
            <h3>
                <span className='title'>创意风格</span>
                <span className='close' onClick={()=>onShowSetting(false)}><i className='iconfont icon-cuowu'></i></span>
            </h3>
            <div className="ideaGroupCut" style={{maxHeight:height||'1000000px'}}>
                <div className="ideaGroup">
                    <div className="ideoItem stylus">
                        <h4>选择风格</h4>
                        <ul>
                            {styleList.map(style => {
                                const previewPic = style.preview.includes('http')?style.preview:('https:'+style.preview)
                                return (
                                    <li
                                        className={activeStyle.id === style.id ? 'active' : ''}
                                        key={style.id}
                                        onClick={() => {
                                            selectStyle(style)
                                        }}
                                    >
                                        <img src={previewPic} />
                                        <span>{style.name}</span>
                                    </li>
                                )
                            })}
                        </ul>
                    </div>
                    <div className="ideoItem quality">
                        <h4>选择版式</h4>
                        <ul>
                            {formatList.map(item => {
                                return <li
                                    key={item.id}
                                    className={`format${item.id} ${activeFormat.id === item.id ? 'active' : ''}`}
                                    onClick={() => {
                                        selectFormat(item)
                                    }}
                                >
                                    <b><i></i></b>
                                    <span>{item.name}</span>
                                </li>
                            })}
                        </ul>
                    </div>
                    <div className="ideoItem quality">
                        <h4>选择画质</h4>
                        <ul>
                            {qualityList.map(item => {
                                return <li
                                    key={item.name}
                                    className={`${activeQuality.value === item.value ? 'active' : ''}`}
                                    onClick={() => {
                                        selectQuality(item)
                                    }}
                                >{item.name}</li>
                            })}
                        </ul>
                    </div>
                    <div className="ideoItem quality">
                        <h4>生成张数</h4>
                        <ul>
                            {produceNumber.map(item => {
                                return <li
                                    key={item.value}
                                    className={`${activeProducer.value === item.value ? 'active' : ''}`}
                                    onClick={() => {
                                        selectProduce(item)
                                    }}
                                >{item.name}</li>
                            })}
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    )
}